<template>
  <div>
    <!-- 1.标题 -->
    <van-nav-bar title="专题" fixed></van-nav-bar>
    <div class="zhanwei"></div>
    <!-- 渲染内容 -->
    <List @getItemID="receiveId"></List>
    <!-- 专题详情页面 -->
   <DetailPage v-if="isHSowDetailPage" :id="id" v-model="isHSowDetailPage"></DetailPage>

  </div>
</template>

<script>
import List from "./components/List.vue";
import DetailPage from "./components/detailPage.vue"

export default {
  name: "specialIndex",
  data() {
    return {
      id: 0,
      isHSowDetailPage: false,
    };
  },
  components: {
    List,
    DetailPage,
   
  },
  methods: {
    receiveId($event) {
      this.id = $event;//接收id
      this.isHSowDetailPage = true;//展示详情页;
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .van-nav-bar__content {
  background-color: rgb(225, 28, 52);
}
::v-deep .van-nav-bar__title {
  color: #fff !important;
}
.zhanwei {
  height: 92px;
}
</style>
